<template>
  <!-- 签到 -->
  <div class="signin">
    <i class="iconfont icon-rili"></i>
    <div class="sign">
      <p>
        <span class="date">{{ dateTime }} !</span><span class="signbtn"><el-button round>去签到</el-button></span>
      </p>
      <p class="sign-tip">点亮你在社区的每一天</p>
    </div>
  </div>
  <!-- 广告页 -->
  <div class="adver-pic">
    <span class="closebtn">
      <el-icon><CloseBold /></el-icon>
    </span>
    <a class="label" href="https://bd.juejin.cn?utm_campaign=bd&amp;utm_source=web&amp;utm_medium=banner" target="_blank">
      <span class="inco">投放</span> <span>广告</span>
    </a>
    <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/517b2a215d7e4fe4a6357439c0cfde5c~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?" alt="" />
  </div>
  <!-- 广告页 -->
  <div class="adver-pic">
    <a class="label" href="https://bd.juejin.cn?utm_campaign=bd&amp;utm_source=web&amp;utm_medium=banner" target="_blank">
      <span class="inco">投放</span> <span>广告</span>
    </a>
    <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd207d21838141f38369a368ecbdaab8~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?" alt="" />
  </div>
  <!-- 下载APP -->
  <div class="app-link">
    <div class="app-pic">
      <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/home.59780ae.png" alt="" />
    </div>
    <div class="content-text">
      <p class="headline">下载稀土掘金APP</p>
      <p class="desc">一个帮助开发者成长的社区</p>
    </div>
  </div>
  <!-- 作者排行榜 -->
  <div class="recommend-author-block">
    <header>🎖️作者榜</header>
    <div class="user-list">
      <div class="user-item" v-for="(item, index) in authorList" :key="index">
        <a href="#">
          <div class="item">
            <div class="item-header">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="user-info">
              <a href="#">
                <span class="item-name">{{ item.authorName }}</span>
                <span class="rank">
                  <img :src="item.rank" alt="" />
                </span>
              </a>
              <div class="position">{{ item.position }}</div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <footer>
      <a href="#">
        完整榜单 <el-icon><ArrowRightBold /></el-icon>
      </a>
    </footer>
  </div>
  <!-- 链接列表 -->
  <div class="sidebar-block">
    <ul class="link-list">
      <li class="item" v-for="(item, index) in linkList" :key="index">
        <a class="link" href="">
          <img :src="item.link" alt="" />
          <span class="title">{{ item.title }}</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="index-aside-footer">
    <ul class="more-list">
      <li class="item"><a href="#">用户协议</a></li>
      <li class="item"><a href="#">营业执照</a></li>
      <li class="item"><a href="#">隐私政策</a></li>
      <li class="item"><a href="#">关于我们</a></li>
    </ul>

    <ul class="more-list">
      <li class="item"><a href="#">站点地图</a></li>
      <li class="item"><a href="#">使用指南 </a></li>
      <li class="item"><a href="#">友情链接</a></li>
      <li class="item"><a href="#">更多文章</a></li>
    </ul>
    <ul class="more-list">
      <li class="item"><a href="#">京ICP备18012699号-3 </a></li>
    </ul>
    <ul class="more-list">
      <li class="item">
        <a href="">
          <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/police.d0289dc.png" alt="" />
          京公网安备11010802026719号
        </a>
      </li>
      <li><span>版权所有：北京北比信息技术有限公司</span></li>
      <li><span>公司地址：北京市海淀区信息路甲28号13层B座13B-5</span></li>
      <li><span>公司座机：010-83434395</span></li>
      <li class="item">
        <span> 举报邮箱：<a href="#">feedback@xitu.io</a> </span>
      </li>
      <li class="item"><a href=""></a></li>
    </ul>
    <ul class="more-list">
      <li class="item"><a href="#">@2022 稀土掘金 </a></li>
    </ul>
    <ul class="more-list">
      <li class="item">
        <a href="#">
          <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/weibo.0cd39f5.png" alt="" />
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/wechat.ce329e6.png" alt="" />
        </a>
        <div class="qr-panel">
          <div class="title">微信扫一扫</div>
          <img class="wechat-img" src="https://cxjpicgo.oss-cn-chengdu.aliyuncs.com/wechat.png" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const dateTime = ref('')
const authorList = ref([
  {
    authorName: '成都彭于晏',
    authorId: '1',
    avatar: 'https://p9-passport.byteacctimg.com/img/user-avatar/7f79c946f227c28644b2c7fa65aee097~300x300.image',
    rank: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/2c3fafd535a0625b44a5a57f9f536d77.svg',
    position: '社区签到榜第一'
  },
  {
    authorName: '成都李彦祖',
    authorId: '2',
    avatar: 'https://p9-passport.byteacctimg.com/img/user-avatar/861236a2285ecd9191fd884cb5e82dfd~300x300.image',
    rank: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f8d51984638784aff27209d38b6cd3bf.svg',
    position: '技术专家'
  },
  {
    authorName: '成都郭富城',
    authorId: '3',
    avatar: '	https://p6-passport.byteacctimg.com/img/user-avatar/ddd95876f23c6e8ab56cab355f78a059~300x300.image',
    rank: '	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f8d51984638784aff27209d38b6cd3bf.svg',
    position: '全栈工程师 @稀土掘金'
  }
])
const linkList = ref([
  {
    title: '稀土掘金漫游指南',
    link: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-tutu.d58819c.png'
  },
  {
    title: '安装掘金浏览器插件',
    link: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-extension-icon.4b79fb4.png'
  },
  {
    title: '前往掘金翻译计划',
    link: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-miner.b78347c.png'
  }
])
const handleDate = () => {
  const houer = new Date().getHours()
  if (houer >= 20 || houer < 6) {
    dateTime.value = '晚上好'
  } else if (houer >= 6 && houer < 12) {
    dateTime.value = '上午好'
  } else if (houer >= 12 && houer < 20) {
    dateTime.value = '下午好'
  }
}
handleDate()
</script>

<style lang="scss" scoped>
.signin {
  width: 100%;
  height: 100%;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  background-color: #fff;
  i {
    font-size: 24px;
    color: #ffcf8b;
  }
}
.sign {
  margin-left: 10px;
  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.date {
  font-size: 20px;
}
.signbtn {
  margin-left: 20px;
  button {
    border: 1px solid $jjColor;
    background-color: #fff;
    color: $jjColor;
    font-size: 14px;
    border-radius: 50px;
    &:hover {
      background-color: rgb(0, 162, 255);
      color: #fff;
    }
  }
}
.sign-tip {
  margin-top: 10px;
  font-size: 14px;
  color: #4e5969;
}
/* 广告 */
.adver-pic {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 16px;
  &:hover {
    .closebtn {
      opacity: 1;
    }
  }
  .closebtn {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
    opacity: 0;
  }
  .label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    a {
      display: flex;
    }
    &:hover {
      width: 70px;
      background-color: rgba(0, 0, 0, 0.3);
      .inco {
        display: inline-block;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .inco {
    display: none;
  }
}
/* 下载APP */
.app-link {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;

  .app-pic {
    width: 50px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .content-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .headline {
      font-size: 14px;
      color: #1d2129;
    }
    .desc {
      font-size: 12px;
      color: #86909c;
      margin-top: 6px;
    }
  }
}
/* 作者排行榜 */
.recommend-author-block {
  margin-top: 16px;

  background-color: #fff;
  header {
    font-size: 14px;
    color: #4e5969;
    padding: 16px;
    border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
  }
  .user-list {
    .user-item {
      padding: 16px;

      cursor: pointer;
      &:hover {
        background-color: hsl(0deg 0% 85% / 10%);
      }
    }
    .item {
      display: flex;
      .item-header {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 6px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .user-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .item-name {
          font-size: 14px;
          color: #1d2129;
          margin-right: 5px;
        }
      }
      .position {
        font-size: 12px;
        color: #86909c;
      }
    }
  }
  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-top: 1px solid hsla(0, 0%, 59.2%, 0.1);

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #007fff;
      vertical-align: top;
    }
  }
}
/* 链接列表 */
.sidebar-block {
  margin-top: 16px;
  background-color: #fff;
  .link-list {
    .item {
      padding: 16px;
      &:hover {
        background-color: hsl(0deg 0% 85% / 10%);
      }
      a {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
        .title {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}
.index-aside-footer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .more-list {
    display: flex;
    align-items: center;

    .item {
      margin-right: 10px;
      a {
        font-size: 12px;
        color: #909090;
        &:hover {
          color: #007fff;
        }
      }
    }
    &:nth-child(4) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      li {
        span {
          font-size: 12px;
          color: #909090;
        }
      }
    }
    &:last-child {
      display: flex;

      li {
        margin-top: 10px;
        position: relative;
        &:hover {
          .qr-panel {
            opacity: 1;
          }
        }
        img {
          width: 24px;
          height: 24px;
        }
      }
      .qr-panel {
        position: absolute;
        top: 35px;
        left: -40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 122px;
        height: 156px;
        padding: 10px;
        background-color: #fff;
        opacity: 0;
        transition: all 0.3s;
        border-radius: 4px;
        img {
          width: 100%;
          height: 100%;
        }
        .title {
          font-size: 12px;
          color: #909090;
        }
      }
    }
  }
}
</style>
